<!-- 带资格角的盒子组件 -->
<template>
  <div class="box">
    <div class="header">
      <div class="left">
        <span class="boxtitle">{{ boxTitle }}</span>
        <div class="right"
          v-if="dropDown.length">
          <div class="btn"
            @click="showDropDown = !showDropDown">
            {{ dropDownName }}
            <img src="~assets/boardImg/down.png"
              alt=""
              srcset="" />
          </div>
          <div class="Drop_down">
            <!--下拉菜单为父组件传入的 -->
            <div class="down_item"
              v-show="showDropDown"
              v-for="item in dropDown"
              :key="item.key"
              :label="item.label"
              @click="dropDownClick(item.key, item.label)"
              :class="activeDropDown == item.key ? 'active' : ''">
              {{ item.label }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div v-for="(value,index) in resArr"
        :key="index"
        class="drawer">
        <div class="header1"
          @click="setDown(index)">
          <div class="left">{{ value.title }}</div>
          <div class="right"
            :class="value.isActive? 'up' : 'down'"></div>
        </div>
        <div class="drawermain">
          <ul>
            <li>
              <p style="padding: 10px 0px">任务量</p>
              <p>
                <span class="span1">{{value.progress}}</span><span class="danwei">个</span>
              </p>
            </li>
            <li>
              <p style="padding: 10px 0px">标签量</p>
              <p>
                <span class="span1">{{value.items }}</span><span class="danwei">个</span>
              </p>
            </li>
            <li>
              <p style="padding: 10px 0px">作业质量</p>
              <p>
                <span class="span1">{{value.quality}}</span>
              </p>
            </li>
            <li>
              <p style="padding: 10px 0px">作业效率</p>
              <p>
                <span class="span1">{{value.efficiency}}</span><span class="danwei">秒/个</span>
              </p>
            </li>

          </ul>
        </div>
        <div class="maininfo"
          :style="value.isActive ? '' : 'height:0'"
          v-if="value.renwushu">
          <!-- <div class="span2"
            style="width:20%;">
            <img src="~assets/boardImg/u189.png" />
            <span class="span2span"
              style="padding-right:0%;">任务书</span>
          </div> -->
          <div class="renwushu">
            <!-- <ul>
              <li> -->
            <ul style="padding: 0px 5px">
              <li class="span2 span22">
                <span class="span2span">项目介绍：<span class="rwscontent">{{value.renwushu.demand_summary}}</span></span>
              </li>
              <li class="span2 span22">
                <span class="span2span">项目名称：<span class="rwscontent">{{value.renwushu.project_name}}</span></span>
              </li>
              <li class="span2 span23">
                <span class="span2span">需求提出方：<span class="rwscontent">{{value.renwushu.demand_raise_person}}</span></span>
              </li>
              <li class="span2 span22">
                <span class="span2span">标注任务：<span class="rwscontent">{{value.renwushu.annotation_task}}</span></span>
              </li>
              <li class="span2 span23">
                <span class="span2span">标注工作量：<span class="rwscontent">{{value.renwushu.annotation_workload}}</span></span>
              </li>
              <!-- <li class="span2 span22">
                <span class="span2span">任务难点：<span class="rwscontent">{{value.renwushu.task_difficult}}</span></span>
              </li>
              <li class="span2 span23">
                <span class="span2span">完成时间：<span class="rwscontent">{{value.renwushu.completed_time}}</span></span>
              </li>
              <li class="span2 span22">
                <span class="span2span">是否承接：<span class="rwscontent">{{value.renwushu.undertake}}</span></span>
              </li>
              <li class="span2 span23">
                <span class="span2span">项目经理：<span class="rwscontent">{{value.renwushu.manager}}</span></span>
              </li>
              <li class="span2 span22">
                <span class="span2span">发送日期：<span class="rwscontent">{{value.renwushu.send_time}}</span></span>
              </li>
              <li class="span2 span23">
                <span class="span2span">培训日期：<span class="rwscontent">{{value.renwushu.train_time}}</span></span>
              </li>
              <li class="span2 span22">
                <span class="span2span">培训时长：<span class="rwscontent">{{value.renwushu.train_duration}}</span></span>
              </li>
              <li class="span2 span23">
                <span class="span2span">初始效率：<span class="rwscontent">{{value.renwushu.initial_efficient}}</span></span>
              </li>
              <li class="span2 span22">
                <span class="span2span">提升周期：<span class="rwscontent">{{value.renwushu.promote_period}}</span></span>
              </li>
              <li class="span2 span23">
                <span class="span2span">目标效率：<span class="rwscontent">{{value.renwushu.target_efficient}}</span></span>
              </li>
              <li class="span2 span22">
                <span class="span2span">标注总量：<span class="rwscontent">{{value.renwushu.annotation_sum}}</span></span>
              </li>
              <li class="span2 span23">
                <span class="span2span">标注开始时间：<span class="rwscontent">{{value.renwushu.annotation_stime}}</span></span>
              </li>
              <li class="span2 span22">
                <span class="span2span">标注工期：<span class="rwscontent">{{value.renwushu.annotate_time}}</span></span>
              </li>
              <li class="span2 span23">
                <span class="span2span">交付质量：<span class="rwscontent">{{value.renwushu.delivery_time}}</span></span>
              </li>
              <li class="span2 span22">
                <span class="span2span">标注人员：<span class="rwscontent">{{value.renwushu.annotation_number}}</span></span>
              </li>
              <li class="span2 span23">
                <span class="span2span">审核人员：<span class="rwscontent">{{value.renwushu.quality_number}}</span></span>
              </li>
              <li class="span2 span22">
                <span class="span2span">质检人员：<span class="rwscontent">{{value.renwushu.delivery_time}}</span></span>
              </li>
              <li class="span2 span23">
                <span class="span2span">标注能力需求：<span class="rwscontent">{{value.renwushu.annotation_capacity}}</span></span>
              </li>
              <li class="span2 span22">
                <span class="span2span">验收人员：<span class="rwscontent">{{value.renwushu.accept_person}}</span></span>
              </li> -->
              <li class="span2 span23">
                <span class="span2span">验收策略：<span class="rwscontent">{{value.renwushu.accept_strategy}}</span></span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="pos pos_tl"></div>
    <div class="pos pos_tr"></div> -->
    <div class="pos pos_bl"></div>
    <div class="pos pos_br"></div>
  </div>
</template>

<script>
import { projectList } from "@/api/all.js";

export default {
  components: {
    // pdf
  },
  props: {
    // 盒子标题
    boxTitle: {
      type: String,
      default: () => {
        return "项目清单";
      }
    }
    // 下拉菜单按钮名字
    // dropDownName: {
    //   type: String,
    //   default: () => {
    //     return "进行中";
    //   }
    // },
    // 下拉菜单
    // dropDown: {
    //   type: Array,
    //   default: () => {
    //     return ["选项一", "选项二"];
    //   }
    // }
  },
  data() {
    return {
      // url:"~assets/pdffile.pdf",
      dialogAddFile: false,
      showDropDown: false, // 是否展开下拉菜单
      activeDropDown: 0, // 当前选中的下拉菜单
      isActive: 0, // 是否点击展开
      // drawerTitle: "双录稽核数据标注",
      // projectId: "397",
      type: "1",
      dropDownName: "进行中",
      dropDown: [
        { key: "0", label: "全部" },
        { key: "1", label: "进行中" }
        // { key: "397", label: "双录稽核数据标注" },
        // { key: "295", label: "通用机打凭证-要素提取" },
        // { key: "293", label: "一般业务申请书-要素提取" },
        // { key: "291", label: "特定业务申请书-要素提取" },
        // { key: "289", label: "银行汇票-要素提取" },
        // { key: "287", label: "支款凭证-要素提取" },
        // { key: "285", label: "单位结算卡业务凭证-要素提取" },
        // { key: "259", label: "汇款申请书-票据分类" },
        // { key: "253", label: "安防标注项目" }
      ],
      resultObj: {
        // efficiency: "79981", //作业效率
        // progress: "123355", //总体进度
        // items: "1233553", //作业量
        // quality: "1.4%" //标注质量
      },
      renwushu: {},
      resArr: [
        // {
        //   efficiency: "79981", //作业效率
        //   progress: "123456", //总体进度
        //   items: "1233553", //作业量
        //   quality: "100.4%", //标注质量,
        //   title: "安防标注项目",
        //   renwushu: {},
        //   isActive: false
        // },
        // {
        //   efficiency: "33%", //作业效率
        //   progress: "12435", //总体进度
        //   items: "140", //作业量
        //   quality: "1.4%", //标注质量
        //   renwushu: {},
        //   title: "汇款申请书-票据分类",
        //   isActive: false
        // },
        // {
        //   efficiency: "33%", //作业效率
        //   progress: "12435", //总体进度
        //   items: "140", //作业量
        //   quality: "1.4%", //标注质量
        //   renwushu: {},
        //   title: "汇款申请书-票据分类",
        //   isActive: false
        // },
        // {
        //   efficiency: "33%", //作业效率
        //   progress: "12435", //总体进度
        //   items: "140", //作业量
        //   quality: "1.4%", //标注质量
        //   renwushu: {},
        //   title: "汇款申请书-票据分类",
        //   isActive: false
        // }
      ]
    };
  },
  methods: {
    // pdfinfo() {
    //   // this.dialogAddFile = true;
    //   window.open(this.resultObj.renwushu);
    // },
    //   获取数据

    async getprojectObj() {
      const res = await projectList(this.type);
      this.resArr = res.result;
      // for (var i; i < this.resArr.length; i++) {
      //   this.resultObj = this.resArr[i];
      //   this.renwushu = this.resArr[i].renwushu;
      // }
    },
    // 下拉菜单被点击
    dropDownClick(idx, label) {
      this.activeDropDown = idx;
      this.$emit("dropDownClick", idx); // 返回下拉菜单点击的索引
      this.dropDownName = label;
      // this.drawerTitle = label;
      this.type = idx;
      this.showDropDown = false;
      this.getprojectObj();
    },
    // 展开或收缩
    setDown(index) {
      this.resArr[index].isActive = !this.resArr[index].isActive;
    }
  },
  created() {
    this.getprojectObj();
  },
  mounted() {
    // this.getprojectObj();
  }
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  padding: 10px;
  background: #152149;
  background: url(~assets/boardImg/u135.svg) no-repeat;
  background-size: 100% auto;
  .header {
    height: 30px;
    // font-size: 0px;
    .left {
      width: 43%;
      display: flex;
      justify-content: space-around;
      .boxtitle {
        display: inline-block;
        padding-left: 30px;
        line-height: 30px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        vertical-align: bottom;
      }
      .right {
        // float: right;
        // line-height: 30px;
        position: relative;
        //  padding-left: 50px;
        width: 77px;
        background: url(~assets/boardImg/u366.svg) no-repeat;
        background-size: auto 100%;
        .btn {
          line-height: 28px;
          cursor: pointer;
          width: 75px;
          padding: 2px 2px 2px 10px;
          font-family: "Arial Normal", "Arial", sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 13px;
          letter-spacing: normal;
          color: #0c73f5;
          vertical-align: none;
          text-align: left;
          text-transform: none;
          background-color: transparent;
          border-color: transparent;
          img {
            height: 13px;
            width: auto;
            vertical-align: middle;
          }
        }
        .Drop_down {
          position: absolute;
          min-width: 100%;
          top: 32px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 999;
          .down_item {
            padding: 4px;
            background: #fff;
            // color: #000 !important;
            color: #0c73f5;
            cursor: pointer;
            font-size: 12px;
            text-align: center;
            &:hover {
              background: #0099ff;
              color: #fff;
            }
          }
          .active {
            background: #0099ff;
            color: #fff;
          }
        }
      }
    }
  }

  .main {
    height: 450px;
    overflow-y: scroll;
    // margin-top: 10px;
    padding: 10px 0;
    .drawer {
      padding: 9px 0 2px 0;
      .header1 {
        overflow: hidden;
        // background: linear-gradient(
        //   to right,
        //   rgba(96, 152, 232, 1) 0%,
        //   rgba(255, 255, 255, 0) 100%
        // );
        background: url(~assets/boardImg/u184.svg)  no-repeat;
        background-size: 100%;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        // font-size: 0px;
        .left {
          //   float: left;
          // width: 30%;
          padding-left: 30px;
          font-size: 16px;
          color: #fff;
          font-family: "PingFang SC ", "PingFang SC", sans-serif;
          font-weight: 650;
          font-style: normal;
        }
        .right {
          width: 30px;
          height: 40px;
        }
        .down {
          height:100%;
          background: url(~assets/boardImg/down.png) no-repeat;
          background-size: 100% auto;
        }
        .up {
          height:100%;
          background: url(~assets/boardImg/up.png) no-repeat;
          background-size: 100% auto;
        }
      }
      .maininfo {
        overflow: hidden;
        .renwushu {
          background-color: #152149;
          ul {
            li {
              .span22 {
                float: left;
              }
              .span23 {
                float: right;
              }
              .rwscontent{
                color:#00ffff;
              }
            }
          }
        }
        p {
          padding: 4px 0;
        }
      }
      .drawermain {
        ul {
          display: flex;
          justify-content: space-between;
          padding: 8px 14px;
          text-align: center;
          align-items: center;
          font-size: 14px;
          li{
            width:27%;
          }
        }

        .span1 {
          font-size: 24px;
          font-weight: 700px;
          font-style: normal;
          color: #00ffff;
          padding: 10px;
        }
      }
      .span2 {
        // text-align: center;
        align-items: center;
        font-size: 14px;
        .span2span {
          // float: right;
          height: 30px;
          line-height: 30px;
        }
      }
    }
  }
  .danwei {
    color: #557fb6;
  }
  .pos {
    position: absolute;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
  }
  .pos_tl {
    top: 0;
    left: 0;
    border-top: 2px solid #667aaa;
    border-left: 2px solid #667aaa;
  }
  .pos_tr {
    top: 0;
    right: 0;
    border-top: 2px solid #667aaa;
    border-right: 2px solid #667aaa;
  }
  .pos_bl {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #667aaa;
    border-left: 2px solid #667aaa;
  }
  .pos_br {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid #667aaa;
    border-right: 2px solid #667aaa;
  }
}
.main::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.main::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 12px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #0e6771;
}
.main::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  background: none;
}
</style>
